<!-- 忘记密码 -->
<template>
    <div class="forget-box">
        <FormForgetProcess v-if="this.forgetStep == 0" step="0"/>
        <FormForgetProcess v-if="this.forgetStep == 1" step="1"/>
        <FormForgetProcess v-if="this.forgetStep == 2" step="2"/>
        <FormForgetTitle v-if="this.forgetStep == 0" forgetTitle="填写手机号"/>
        <FormForgetTitle v-if="this.forgetStep == 1" forgetTitle="修改密码"/>
        <FormForgetTitle v-if="this.forgetStep == 2" forgetTitle="修改完成"/>
        <div class="form-box">
            <el-form :model="form" ref="form" :rules="rules" label-width="130px" class="demo-ruleForm edit-form-box">
                <el-row class="form-conent-box form-conent-box-forgetpass">
                    <el-col :span="24" v-if="this.forgetStep == 0">
                        <div class="grid-content bg-purple-dark register-int-box">
                            <el-form-item label="手机号：">
                                <el-input class="approve-int" maxlength="11" v-model="form.phone_number" placeholder="请输入手机号"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码：">
                                <el-input class="approve-int image_code" v-model="form.pic_code" placeholder="请输入验证码" maxlength="4"></el-input>
                                <ImageCode v-model="form.pic_code_key"></ImageCode>
                            </el-form-item>
                            <el-form-item label="短信验证码：" class="forget-num" prop="phone_verify_code">
                                <el-input class="approve-int" maxlength="6" v-model="form.phone_verify_code" placeholder="请输入短信验证码" maxlemgth="6"></el-input>
                                <MessageCode @click.native="getMessageCode" ref="messageCode" :phoneNumber="form.phone_number"></MessageCode>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="24" v-if="this.forgetStep == 1">
                        <div class="grid-content bg-purple-dark register-int-box">
                            <el-form-item label="设置新密码：">
                                <el-input type="password" class="approve-int" maxlength="12" v-model="form.new_password" placeholder="请输入6-12位新密码，建议包含数字和字母"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码：">
                                <el-input type="password" class="approve-int" maxlength="12" v-model="form.new_password2" placeholder="请再次确认新密码"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="24" v-if="this.forgetStep == 2">
                        <div class="grid-content bg-purple-dark register-int-box forget-success">
                            <i class="iconfont icon-chenggong"></i>
                            <div class="forget-success-text">
                                <div class="forget-success-rem">密码修改已完成</div>
                                <el-button type="text" @click="$router.push('/login')">前往登录>></el-button>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="submit-btn pass-submit-btn">
                            <el-button type="primary" size="medium" @click="checkCode()" v-if="this.forgetStep == 0">下一步</el-button>
                            <el-button type="primary" size="medium" @click="checkPassword()" v-if="this.forgetStep == 1">下一步</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import FormForgetProcess from '@component/common/FormForgetProcess.vue';
    import FormForgetTitle from '@component/common/FormForgetTitle.vue';
    import MessageCode from '@component/common/MessageCode.vue';
    import ImageCode from '@component/common/ImageCode.vue'
    @Component({
        components: {
            FormForgetProcess,
            FormForgetTitle,
            MessageCode,
            ImageCode
        }
    })
    export default class ForegetPassword extends Vue {
        forgetStep: number = 0;
        form = {
            phone_number: '',
            phone_verify_code: '',
            new_password: '',
            new_password2: '',
            pic_code: '',
            pic_code_key: ''
        }
        rules = {
            phone_number: [
                { required: true, message: '请输入手机号码', trigger: 'blur' },
                {
                    pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                    message: '手机号码错误',
                    trigger: 'blur'
                }
            ],
            pic_code: [
                { required: true, message: '请输入验证码', trigger: 'blur' }
            ],
            new_password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                {
                    pattern: /^[a-zA-Z0-9]{6,12}$/,
                    message: '请输入6-12位密码',
                    trigger: 'blur'
                }
            ],
            new_password2: [
                { required: true, message: '请再次输入密码', trigger: 'blur' }
            ]
        }
        // 判断两次输入密码是否一致
        testConfirmPassword (rule: string, value: string, cb: any) {
            if (this.form.new_password === '') {
                cb(new Error('请先输入密码'));
            } else {
                if (value === this.form.new_password) {
                    cb();
                } else {
                    cb(new Error('您两次输入的密码不一致,请重新输入'));
                }
            }
        }
        // 获取手机验证码
        getMessageCode () {
            if(!this.form.phone_number){
                this.$alert('请输入手机号！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if(!this.form.pic_code){
                this.$alert('请输入验证码！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            this.$refs.messageCode.start();
        }
        // 点击提交
        checkCode () {
            // 第一步
            this.$refs.form.validate(valid => {
                if(valid){
                    if(this.forgetStep == 0){
                        let forgetForm1 = {
                            phone_number: this.form.phone_number,
                            phone_verify_code: this.form.phone_verify_code
                        }
                        this.$http.put(`customers/customerPasswordReset?r=1&phone=${this.form.phone_number}`,forgetForm1)
                            .then((response)=>{
                                if (response.status == 200){
                                    this.forgetStep = 1;
                                }
                            })
                    }
                }
            })
        }
        checkPassword () {
            // 第二步
            this.$refs.form.validate(valid => {
                if(valid){
                    if(this.form.new_password != this.form.new_password2){
                        this.$alert('两次密码输入不一致！','提示',{
                            confirmButtonText: '确定',
                            customClass: 'custom-message-box',
                            callback: action => {}
                        })
                        return;
                    }
                    if(this.forgetStep == 1){
                        let forgetForm2 = {
                            phone_number: this.form.phone_number,
                            phone_verify_code: this.form.phone_verify_code,
                            new_password: this.form.new_password,
                            new_password2: this.form.new_password2
                        }
                        this.$http.put(`customers/customerPasswordReset?r=2&phone=${this.form.phone_number}`,forgetForm2)
                            .then((response)=>{
                                if(response.status == 200){
                                    this.forgetStep = 2;
                                }
                            })
                    }
                }
            })
        }
        mounted () {

        }
    }
</script>

<style lang="scss" scoped>
    .pass-submit-btn {
        margin-left: 130px;
        margin-top: 40px;
        margin-bottom: 100px;
    }
    .forget-success {
        display: flex;
        justify-content: center;
        margin-bottom: 150px;
    }
    .icon-chenggong {
        color: $__color-success-remind;
        font-size: 60px;
    }
    .forget-success-text {
        margin-left: 20px;
    }
    .forget-success-rem {
        font-size: $__more-big-font-size;
        margin-bottom: 20px;
    }
    .form-conent-box-forgetpass {
        width: 470px !important;
    }
</style>
<style lang="scss">
    .forget-num {
        .el-input {
            width: 63%;
        }
        .approve-int .el-input__inner {
            width: 214px !important;
        }
    }
    .forget-success-text {
        .el-button--text {
            padding: 0;
            font-size: $__font-size-default;
            color: $__color-link;
        }
    }
</style>